// 导入React核心hooks
import { useState, useEffect, useRef } from 'react'
// 导入Ant Design的App组件用于包裹应用
import { App, Watermark } from 'antd'
// 导入当前组件的样式文件
import styles from './ExamHistory.module.scss'
// 导入抽屉组件，用于显示考试详情
import Drawer from './components/drawer/Drawer'
// 导入获取考试列表和详情的API
import { getExaminationsApi, getExamDetailApi } from '@/service/exam'
// 导入考试项类型定义
import type { ExaminationItem, ExaminationDetail } from '@/service/type'
// 导入考试记录表格组件
import ExamHistoryTable from './components/table/ExamHistoryTable'
// 考试记录主组件
const ExamHistory = () => {
  // 存储考试列表数据
  const [examList, setExamList] = useState<ExaminationItem[]>([])
  // 存储当前查看的考试详情数据
  const [detailData, setDetailData] = useState<ExaminationDetail | null>(null)
  // 加载状态
  const [loading, setLoading] = useState(false)
  // 分页器状态
  const [pagination, setPagination] = useState({
    current: 1,    // 当前页码
    pageSize: 10,  // 每页条数
    total: 0,       // 总条数
  })
  // 控制抽屉组件显示状态
  const [open, setOpen] = useState(false)

  /**
   * 获取考试列表数据
   * @param page 当前页码，默认为1
   * @param pageSize 每页条数，默认为10
   */
  // 存储所有考试数据
  const getExamList = async (page = 1, pageSize = 10) => {
    setLoading(true)  // 开始加载
    try {
      // 使用新的API接口，
      const response = await getExaminationsApi()
      
      setExamList(response.data.data.list)  // 直接使用API返回的分页数据
      // 更新分页状态
      setPagination({
        current: page,
        pageSize: pageSize,
        total: response.data.data.total
      })
    } catch (e) {
      console.error('获取考试列表出错:', e)  // 错误处理
    } finally {
      setLoading(false)  // 结束加载
    }
  }

  /**
   * 获取考试详情数据
   * @param examId 考试ID
   */
  const getExamDetail = async (examId: string) => {
    // console.log(examId)
    setOpen(true)      // 打开抽屉
    setLoading(true)   // 开始加载
    try {
      const response = await getExamDetailApi(examId)  // 调用API获取考试详情
      // console.log(response.data.data)
      setDetailData(response.data.data)  // 更新详情数据状态
    } catch (e) {
      console.log('获取考试详情出错', e)  // 错误处理
    } finally {
      setLoading(false)  // 结束加载
    }
  }

  // 组件挂载时获取考试列表
  useEffect(() => {
    getExamList()
  }, [])


  // 创建容器引用，用于获取DOM元素
  const wrapperRef = useRef<HTMLDivElement>(null);

  // 主组件渲染
  return (
    <App>  {/* Ant Design应用容器 */}
      <div className={styles.examHistory} ref={wrapperRef}>
        <div className={styles.content}>
          <Watermark content="zyj" font={{ fontSize: 30 }} gap={[200, 200]}>
            <h3>考试记录</h3>  {/* 页面标题 */}
            {/* 空状态处理 */}
            {examList.length === 0 && !loading ? (
              <div className={styles.emptyState}>
                <p>暂无考试记录</p>  {/* 空数据提示 */}
                <button
                  className={styles.refreshBtn}
                  onClick={() => getExamList()}  // 点击刷新数据
                >
                  刷新数据
                </button>
              </div>
            ) : (
              /* 正常状态显示表格和抽屉 */
              <>
                {/* 考试记录表格组件 */}
                <ExamHistoryTable
                  data={examList}          // 传递考试数据
                  loading={loading}       // 传递加载状态
                  pagination={pagination} // 传递分页信息
                  onPageChange={getExamList}  // 分页变化回调
                  onViewDetail={getExamDetail} // 查看详情回调
                />
                {/* 考试详情抽屉组件 */}
                <Drawer
                  open={open}          // 控制抽屉显示
                  setOpen={setOpen}    // 设置抽屉状态
                  detailData={detailData} // 传递详情数据
                />
              </>
            )}
          </Watermark>
        </div>

      </div>
    </App >
  )
}

// 默认导出考试记录组件
export default ExamHistory
